---
title: MemFree Build Story 3 -- Clarity vs Google Analytics vs Vercel Analytics vs Plausible Vs Umami
description: 为什么选择 Clarity 作为网页分析工具
image: /images/blog/blog-post-2.jpg
date: '2024-06-14'
---

网页分析对于任何网站来说都是必要的，因此我们必须从 Iverson 中选择一个功能强大、易于使用且性价比高的网页分析工具。
在使用和评估多个网页分析工具后，memfree 最终选择了 Clarity。

## 为什么 MemFree 选择 Clarity

1. 免费
2. 界面简单清晰

## 为什么不选择 Google Analytics

1. 界面复杂，使用困难

## 为什么不选择 Vercel Analytics、Plausible 和 Umami

1. 这些工具不免费，费用高

## 如何将 Clarity 集成到 NextJS 中

将以下代码添加到应用根目录中的 layout.tsx 文件。

```js
<Script id="clarity-script" strategy="afterInteractive">
    {`
            (function(c,l,a,r,i,t,y){
                c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
            })(window, document, "clarity", "script", "${process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID}");
          `}
</Script>
```

<Callout type="warning">
    更新于 6 月 15 日：在尝试 Clarity 几天后，我发现 Clarity 的数据更新不够及时，因此我最终尝试了 Cloudflare Web Analytics。因为 Cloudflare Web Analytics 提供的分析指标足够我使用，数据也及时更新，而且是免费的。
</Callout>

## 如何将 Cloudflare Web Analytics 集成到 NextJS 14 中

只需将以下代码添加到应用根目录中的 layout.tsx 文件。

```js
<Script
    defer
    src="https://static.cloudflareinsights.com/beacon.min.js"
    data-cf-beacon='{"token": "xxxxx"}'
></Script>
```